import React from 'react';
import { Card, Tag } from 'tdesign-react';

const BlogPostComponent = ({
  post,
  onEdit,
  onDelete,
}) => {
  return (
    <Card
      title={
        <h3 style={{
          fontSize: '1.5rem',
          fontWeight: '700',
          margin: 0,
          color: '#1e293b'
        }}>
          {post.title}
        </h3>
      }
      actions={
        <div style={{ display: 'flex', gap: '12px' }}>
          {onEdit && (
            <a 
              style={{ 
                color: '#3b82f6',
                textDecoration: 'none',
                fontWeight: '500',
                fontSize: '0.95rem',
                cursor: 'pointer',
                padding: '6px 12px',
                borderRadius: '6px',
                transition: 'all 0.2s',
                border: '1px solid #dbeafe'
              }} 
              onMouseEnter={(e) => {
                e.target.style.backgroundColor = '#eff6ff';
                e.target.style.borderColor = '#93c5fd';
              }}
              onMouseLeave={(e) => {
                e.target.style.backgroundColor = 'transparent';
                e.target.style.borderColor = '#dbeafe';
              }}
              onClick={() => onEdit(post)}
            >
              编辑
            </a>
          )}
          {onDelete && (
            <a 
              style={{ 
                color: '#ef4444',
                textDecoration: 'none',
                fontWeight: '500',
                fontSize: '0.95rem',
                cursor: 'pointer',
                padding: '6px 12px',
                borderRadius: '6px',
                transition: 'all 0.2s',
                border: '1px solid #fee2e2'
              }}
              onMouseEnter={(e) => {
                e.target.style.backgroundColor = '#fef2f2';
                e.target.style.borderColor = '#fca5a5';
              }}
              onMouseLeave={(e) => {
                e.target.style.backgroundColor = 'transparent';
                e.target.style.borderColor = '#fee2e2';
              }}
              onClick={() => onDelete(post.id)}
            >
              删除
            </a>
          )}
        </div>
      }
      bordered
      style={{ 
        marginBottom: '30px',
        maxWidth: '100%',
        width: '100%',
        borderRadius: '12px',
        boxShadow: '0 4px 12px rgba(0, 0, 0, 0.05)',
        transition: 'box-shadow 0.3s, transform 0.3s',
        border: 'none'
      }}
      hover
      onMouseEnter={(e) => {
        e.currentTarget.style.boxShadow = '0 10px 25px rgba(0, 0, 0, 0.1)';
        e.currentTarget.style.transform = 'translateY(-2px)';
      }}
      onMouseLeave={(e) => {
        e.currentTarget.style.boxShadow = '0 4px 12px rgba(0, 0, 0, 0.05)';
        e.currentTarget.style.transform = 'translateY(0)';
      }}
    >
      <div style={{ 
        marginBottom: '18px',
        display: 'flex',
        flexDirection: 'column'
      }}>
        <div style={{ 
          display: 'flex',
          flexWrap: 'wrap',
          gap: '16px',
          fontSize: '0.95rem',
          color: '#64748b',
          marginBottom: '12px'
        }}>
          <span style={{ display: 'flex', alignItems: 'center', gap: '6px' }}>
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M19 21H5C3.89543 21 3 20.1046 3 19V5C3 3.89543 3.89543 3 5 3H19C20.1046 3 21 3.89543 21 5V19C21 20.1046 20.1046 21 19 21Z" stroke="#64748b" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
              <path d="M16 2V6" stroke="#64748b" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
              <path d="M8 2V6" stroke="#64748b" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
              <path d="M3 10H21" stroke="#64748b" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
            {post.date}
          </span>
          <span style={{ display: 'flex', alignItems: 'center', gap: '6px' }}>
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M20 21V19C20 16.7909 18.2091 15 16 15H8C5.79086 15 4 16.7909 4 19V21" stroke="#64748b" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
              <path d="M12 11C14.2091 11 16 9.20914 16 7C16 4.79086 14.2091 3 12 3C9.79086 3 8 4.79086 8 7C8 9.20914 9.79086 11 12 11Z" stroke="#64748b" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
            {post.author}
          </span>
        </div>
      </div>
      <div style={{ 
        marginBottom: '18px',
        display: 'flex',
        flexWrap: 'wrap',
        gap: '10px'
      }}>
        {post.tags.map((tag, index) => (
          <Tag 
            key={index} 
            theme="primary"
            variant="light"
            style={{ 
              borderRadius: '20px',
              padding: '4px 14px',
              fontSize: '0.85rem',
              fontWeight: '500'
            }}
          >
            {tag}
          </Tag>
        ))}
      </div>
      <div style={{
        wordBreak: 'break-word',
        lineHeight: '1.7',
        color: '#334155',
        fontSize: '1.05rem'
      }}>
        {post.content}
      </div>
    </Card>
  );
};

export default BlogPostComponent;